<!-- 带小图的轮播图 -->
<template>
	<view class="container">
		<navigator v-if="!games" class="nav" :url="`/pages/play/play?id=${urlId}`">
			<view class="min-swiper">
				<view>
					<image lazy-load class="image" :src="images"></image>
				</view>
				<view>
					<swiper :autoplay="iSautoplay" indicator-dots="true" indicator-active-color="#fff">
						<swiper-item v-for="item in minImages">
							<image lazy-load class="image" :src="item.imageUrl"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</navigator>
		
		<view class="nav"  v-if="games">
			<view class="min-swiper">
				<view>
					<image lazy-load class="image" :src="images"></image>
				</view>
				<view>
					<swiper :autoplay="iSautoplay" indicator-dots="true" indicator-active-color="#fff">
						<swiper-item v-for="item in minImages">
							<image lazy-load class="image" :src="item.imageUrl"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>

		<!-- 下部带标题与标签 -->
		<view class="srcoll-content" v-if="iStitle">
			<view class="scroll-test">
				<view class="content-cont">
					<view>{{name}}</view>
					<view class="content-year">&nbsp;&nbsp;({{year}})</view>
				</view>
				<view style="display: flex; align-items: center; ">
					<!-- 只读状态 -->
					<uni-rate allow-half size="10" :readonly="true" :value="bifen" max="6" />
					<view style="font-size: 16rpx; color:#ff0000;">&nbsp;{{bifen}}</view>
				</view>
				<view class="content-tags">
					<text>{{yurt}}&nbsp;/&nbsp;</text>
					<text v-for="tag in tags">{{tag.name}}&nbsp;&nbsp;</text>
				</view>
			</view>
			<view class="scroll-icon" @click="checkboxChange(urlId)">
				<uni-icons size="24" color="#ff0000" :type="starIcon"></uni-icons>
			</view>

		</view>
	</view>
</template>

<script setup>
	const starIcon = ref('star')

	import {
		ref
	} from 'vue';
	import {
		insertCollent
	} from '@/API/yesVideoApis.js';
	defineProps({
		urlId: {
			type: String,
			default: ''
		},
		games:{
			type:Boolean,
			default:false
		},
		images: {
			type: String,
			default: ''
		},
		minImages: {
			type: Object,
			default: {}
		},
		name: {
			type: String,
			default: ''
		},
		biao: {
			type: String,
			default: '你正在追'
		},
		year: {
			type: String,
			default: '2000'
		},
		bifen: {
			type: String,
			default: '4.5'
		},
		yurt: {
			type: String,
			default: '中国'
		},
		tags: {
			type: Object,
			default: {}
		},
		iStitle: {
			type: Boolean,
			default: true
		},
		iSautoplay: {
			type: Boolean,
			default: false
		},
		starIcon: {
			type: String,
			default: 'star'
		}
	})

	//收藏
	const checkboxChange = async (e) => {
		uni.showLoading({
			title: '收藏中..'
		})
		console.log("videoID:", e);
		// #ifdef MP-WEIXIN
		let user = uni.getStorageSync("user");
		// #endif
		let res = await insertCollent(user.id, e);
		console.log("插入：", res);
		if (res == 1) {
			starIcon.value = 'star-filled';
			uni.hideLoading();
			uni.showToast({
				title: "已收藏！",
				icon: 'none'
			})

		} else if (res == 2) {
			starIcon.value = 'star';
			uni.showToast({
				title: "收藏已取消！",
			})
		} else {
			uni.showToast({
				title: "收藏失败！",
				icon: 'error'
			})
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.nav {
			border-radius: 20rpx;
			overflow: hidden;
			width: 100%;
			height: 250rpx;

			.min-swiper {
				display: grid;
				gap: 20rpx;
				grid-template-columns: 200rpx 1fr;
				height: 250rpx;

				.image {
					width: 100%;
					height: 100%;
					background-color: #969696;
				}
			}


		}

		.srcoll-content {
			padding: 10rpx 20rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			justify-content: space-between;
			width: 100%;

			.scroll-test {
				width: 100%;
				box-sizing: border-box;

				.content-cont {
					width: 80%;
					font-size: 20rpx;
					display: flex;
					font-weight: bold;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					.content-year {
						color: $App-min-text-color;
					}
				}

				.content-tags {
					display: flex;
					flex-wrap: nowrap;
					font-size: 16rpx;
					color: $App-min-text-color;

				}
			}

			.scroll-icon {}


		}
	}
</style>